<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>捕获阶段</title>
    <style>
        .父级盒子 {
            width: 500px; /* 宽高 背景色 */
            height: 500px;
            background-color: pink;
        }

        .子级盒子 {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
<h3>事件捕获</h3>
<p>
    事件捕获概念： <br>
    从DOM的根元素开始去执行对应的事件 (从外到里) <br>
    事件捕获需要写对应代码才能看到效果
</p>
<p style="font-size: 20px;">
    语法: <br>
    DOM元素.addEventListener(事件类型, 处理的函数名, 是否使用捕获机制)
</p>
<p>
    说明： <br>
    addEventListener第三个参数传入 true 代表是捕获阶段触发（很少使用） <br>
    若传入false代表冒泡阶段触发，默认就是false <br>
    若是用 DOM L0版本 事件监听，则只有冒泡阶段，没有捕
</p>
<a href="https://www.bilibili.com/video/BV1Y84y1L7Nn/?p=106&spm_id_from=pageDriver&vd_source=cb928a955f1123af004a2e3158113ea7">
    事件流 说明视频讲解
</a>
<hr>

<div class="父级盒子">
    <div class="子级盒子"></div>
</div>

<script>
    //获取 DOM元素
    const 父级盒子 = document.querySelector('.父级盒子')
    const 子级盒子 = document.querySelector('.子级盒子')

    /*
    document --> 父级盒子 --> 子级盒子  //  事件 捕获阶段
    子级盒子 --> 父级盒子 --> document  // 事件 冒泡阶段
     */

    // document 是根DOM元素
    document.addEventListener('click', function () {
        alert('我是, 整个页面')
    }, true) // 使用捕获机制, 第三个参数 true
    父级盒子.addEventListener('click', function () {
        alert('我是,父级盒子')
    }, true)
    子级盒子.addEventListener('click', function () {
        alert('我是,子级盒子')
    }, true)

    // 点击盒子,看弹窗经过. 你点那个盒子,会显示从 根到盒子的 捕获阶段过程
</script>
</body>
</html>